Portfolio website
Naar aanleiding van de opdracht voor mijn toekomst moet ik mijzelf kunnen presenteren door middel van een ’show case’ portfolio website. Met dit portfolio kan ik mij als toekomstige CMD’er online presenteren, bijvoorbeeld naar stage-bedrijven en toekomstige klanten toe. Om dit te kunnen realiseren moet ik mijn ervaringen van de voorgaande perioden toepassen: Interaction design, Web technologies, Patterns, Visual communication etc. Uiteindelijk komt het erop neer dat ik mijzelf moet kunnen profileren door middel van een digitaal portfolio.
Voor dit project moest ik een portolio website creëren aan de hand van richtlijnen. Deze richtlijnen zijn: Look & Listen (LL), Creating Concepts (CC), Design Details (DD) en Make and Realise (MR).
Eindproduct
'Home' pagina. Voor mijn eindproduct heb ik een one page website gemaakt.
Hier ziet u de transities tussen het overschakelen naar de volgende pagina.
'About me' pagina. Een pagina die mij kort en krachtig beschrijft.
'Projects' pagina. Hierin worden mijn projecten/portfolio weergeven.
De afbeeldingen van de projecten kunnen vergroot worden.
'Contact' pagina. Op deze pagina kunnen gegadigden contact met mij opnemen.
Look & Listen | Fase 1
Dit is alleen een kleine greep van wat ik in de 'Look & Listen' fase heb verricht.
Dit is een taakmodel van de 'persoonlijke pagina'. In iedere taakmodel worden de handelingen doorlopen hoe de gebruiker bij zijn doelen kan komen.
Dit is een taakmodel van de 'Portfolio pagina'.
Dit is een taakmodel van de 'Contacten pagina'.
Create Concepts | Fase 2
Ook hier laat ik een kleine greep zien wat ik in 'Create Concepts' fase heb verricht.
Om een persoonlijke tint voor je website te maken is het handig om een metafoor te verzinnen, dat bij je past. Dit is mijn eerste ontwerp/concept voor de logo van mijn website. Tijdens een werkcollege van dit vak, heb ik met verschillende klasgenoten gekeken, wat mijn sterkste punten waren. Na het werkcollege heb ik verschillende kenmerken van mijzelf op papier geschreven:
Serieus: Doelgericht / Oplossingsgericht / Doorwerker
Precies: Nauwkeurig / Perfectionistisch / Gestructureerd / Cijfers
Diversiteit: Handig / Technisch / Kennis / Harde werker
Uiteindelijk kwam ik eruit welke metafoor ik zal kiezen. De metafoor zit niet tussen de bovenstaande lijst, maar de metafoor kwam voort sinds het eindproduct van het eerste blok. Het gaat namelijk om een vogel.
Het gaat om een kolibrie, deze vogels kunnen in de lucht stil staan. Dit vergt uitermate concentratie, zodat ze uit bloemen hun voedsel kunnen binnenhalen. Dit betekent dat ze heel secuur stil moeten blijven in de lucht. Voor mij is dit de perfecte metafoor om in mijn portfolio-website te gebruiken. Ik zal dan ook een logo ontwerpen van deze metafoor.
In het tweede concept heb ik de veren weggelaten. Hij ziet er nu gestroomlijnder uit vergeleken met het eerste concept.
In het derde concept is de kolibrie nog gestileerder ten opzichte van het tweede concept. De vleugels is dit keer aërodynamischer en hij is heel wat slanker geworden.
Toelichting
In de bovenstaande Sitemap heb ik vier verschillende onderwerpen toegevoegd inclusief de homepage. Dit zijn de belangrijkste informaties dat ik aan de doelgroep wil laten zien. In dit ontwerp van deze Sitemap wil ik de indeling gestructureerd houden. Er zijn niet meer dan vier onderwerpen. Onderwerpen die sterk te maken hebben met elkaar, komen in de desbetreffende globale navigatie.
Uit de vorige fase Look & Listen ben ik tot conclusie gekomen om vier verschillende pagina’s te maken:
• Homepage
• Persoonlijke pagina
• Persoonlijke pagina
• Projecten / Portfolio
• Contactgegevens
Dat zien we ook terug in de bovenstaande sitemap.
Tevens kan de gebruiker overschakelen naar Engels of naar het Nederland en een zoekfunctie is niet uitgesloten.
Tevens kan de gebruiker overschakelen naar Engels of naar het Nederland en een zoekfunctie is niet uitgesloten.
Toelichting
In de bovenstaande sitemap, heb ik dit keer geen onderliggende pagina’s gebruikt, zodat het een one-page website wordt. Tevens heb ik uit de eerste fase (Look & Listen) waargenomen, dat je het best de portfolio-website als een persoonlijke verhaal doorloopt. Dit kan het best met een one-page website. Hiermee forceer ik de gebruiker om steeds naar beneden te scrollen. Daarmee worden ze bedwingt om door de hele website te gaan kijken. En dus met deze structuur een verhaallijn gemaakt kan worden.
Tevens kan de gebruiker overschakelen naar Engels of naar het Nederland en een zoekfunctie is niet uitgesloten.
Toelichting
Navigatiemodel Global
De bovenstaande navigatie model laat zien dat de navigatieknoppen op de website in iedere pagina te vinden zijn. En dat men dus altijd de mogelijkheid heeft om terug te keren naar één van deze pagina’s, waar ze ook zijn op de website.
Toelichting
Navigatiemodel Local
De bovenstaande navigatie model laat zien dat de onderliggende pagina’s altijd breekt kan worden tussen elkaar.
Toelichting
Supplementary Model
De bovenstaande navigatie model laat zien dat de zoekfunctie overal in de pagina’s en onderliggende pagina’s verbinding heeft. Dit betekent dat de zoekfunctie over bereikt kan worden.
Design Details | Fase 3
Ook hier laat ik een kleine greep zien wat ik in 'Design Details' fase heb verricht.
Mock-ups
In dit onderdeel zal ik van de gemaakte wireframes (drie in totaal) een visualisatie maken, zodat ik een beeld krijg hoe het in een Hi-Fi prototype eruit kan zien. Ik zal drie concepten van de homepage maken.
Toelichting
Concept 1
De mock-up van de eerste wireframe concept is hier gevisualiseerd. We zien aan de linkerzijde de navigatiebalk staan. aan de rechter zijn is voldoende plaats voor een volledige achtergrond met tekst. Tevens is er een mogelijkheid om in het Engels of in het Nederlands te veranderen.
Toelichting
Concept 1 (Versie2)
Zoals te zien in de bovenstaande afbeelding, heb ik de linker gedeelte waar de navigatiebalk staat aangepast. Het gedeelte heeft een gehele vlak met een zeer lage opacity. Het heeft net een effect dat er een balk staat,maar het schaadt niet de gehele achtergrond van de website. De logo is ook aangepast in de tweede versie van het eerste concept.
Toelichting
Concept 2
In de bovenstaande afbeelding zien we een visualisatie van concept 2. Hierin zien we terug dan het een one-page website betreft, daarnaast zien we dat het gehele achtergrond het hele vlak gebuikt. Doordat er een navigatiebalk zichtbaar is, zou je kunnen spreken dat de gebruiker wordt geforceerd om door de hele website heen te bladeren.
Toelichting
Concept 2 (Versie2)
De tweede versie van concept twee geeft alleen meer dynamiek in de website. Als de gebruiker naar beneden of naar boven scrolled, dan zal de pagina door de helft splitsen en de volgende pagina weergeven.
Tevens wou ik nog een homepage maken, waarbij op de achtergrond een video loop wordt afgespeeld met een persoonlijke tintje.
Toelichting
Concept 3
Zoals boven te zien, heeft de derde concept een horizontale lay-out. Wanneer een gebruiker op één van de afbeeldingen / navigatieknoppen klikt, dan zal het geheel afbeelding uitschuiven tot één geheel. Voor de rest heeft deze pagina alle onderwerpen tot zijn beschikking.
Toelichting
Contentplan
In de grafiek staat grotendeels de contents die ik in mijn website zal implementeren. Dit geeft mij een overzicht hoe ik deze onderdelen zal gebruiken in de portfolio website.
Make & Realise | Fase 4
Zie 'eindproduct'
